<mat-card class="register-card">
  <mat-card-header>
    <mat-card-title>注册</mat-card-title>
    <mat-card-subtitle>注册你的账户</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content class="register-content"
                    *ngIf="configService.globalConfig && configService.globalConfig.registerState === false">
    <p>注册通道关闭</p>
  </mat-card-content>
  <mat-card-content class="register-content"
                    *ngIf="configService.globalConfig && configService.globalConfig.registerState === true">
    <form [formGroup]="formModel">
      <mat-form-field>
        <input matInput placeholder="Email" formControlName="email" required>
        <mat-icon matSuffix svgIcon="email"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','email')">
          Email不能为<strong>空</strong>
        </mat-error>
        <mat-error *ngIf="formModel.hasError('email','email') && !formModel.hasError('required','email')">
          请输入<strong>正确</strong>的Email
        </mat-error>
        <mat-error *ngIf="formModel.hasError('minlength','email')|| formModel.hasError('maxlength','email')">
          Email长度为<strong>6-255</strong>之间
        </mat-error>
      </mat-form-field>

      <div formGroupName="pwdGroup">
        <mat-form-field>
          <input matInput placeholder="密码" minlength="6" maxlength="30" formControlName="password"
                 [type]="hide ? 'password' : 'text'" required>
          <mat-error *ngIf="formModel.hasError('required',['pwdGroup','password'])">
            密码不能为<strong>空</strong>
          </mat-error>
          <mat-error
            *ngIf="formModel.hasError('minlength',['pwdGroup','password'])
            || formModel.hasError('maxlength',['pwdGroup','password'])">
            密码长度为<strong>6-32</strong>之间
          </mat-error>
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'隐藏密码'"
                  [attr.aria-pressed]="hide">
            <mat-icon [svgIcon]="hide ? 'visibility_off' : 'visibility'"></mat-icon>
          </button>
        </mat-form-field>

        <mat-form-field>
          <input matInput placeholder="确认密码" minlength="6" maxlength="30" formControlName="passwordConfirm"
                 [type]="hide ? 'password' : 'text'" required>
          <mat-error *ngIf="formModel.hasError('required',['pwdGroup','passwordConfirm'])">
            确认密码不能为<strong>空</strong>
          </mat-error>
          <mat-error
            *ngIf="formModel.hasError('minlength',['pwdGroup','passwordConfirm'])
            || formModel.hasError('maxlength',['pwdGroup','passwordConfirm'])">
            确认密码长度为<strong>6-32</strong>之间
          </mat-error>
        </mat-form-field>
        <mat-error *ngIf="formModel.hasError('equal','pwdGroup') && formModel.get('pwdGroup').dirty">
          {{formModel.getError('equal', 'pwdGroup')?.msg}}
        </mat-error>
      </div>

      <mat-form-field>
        <input matInput placeholder="用户名" formControlName="username" required>
        <mat-icon matSuffix svgIcon="person"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','username')">
          用户名不能为<strong>空</strong>
        </mat-error>
        <mat-error *ngIf="formModel.hasError('minlength','username')|| formModel.hasError('maxlength','username')">
          用户名长度为<strong>6-32</strong>之间，并且只能使用<strong>大小写字母数字下划线</strong>不能以<strong>下划线</strong>结尾
        </mat-error>
      </mat-form-field>

      <mat-radio-group>
        <label>性别: </label>
        <mat-radio-button value="man" checked>男</mat-radio-button>
        <mat-radio-button value="woman" #womanRadio>女</mat-radio-button>
      </mat-radio-group>

      <img class="captcha-img" src="{{imgUrl}}" *ngIf="imgUrl" (click)="changeCaptcha()" alt="" matTooltip="点击刷新验证码"
           [matTooltipPosition]="'right'">

      <mat-form-field style="width: 150px">
        <input matInput placeholder="验证码" formControlName="captcha" required>
        <mat-icon matSuffix svgIcon="textsms"></mat-icon>
        <mat-error *ngIf="formModel.hasError('required','captcha')">
          验证码不能为<strong>空</strong>
        </mat-error>
      </mat-form-field>
    </form>
  </mat-card-content>
  <mat-card-actions align="end">
    <button *ngIf="configService.globalConfig && configService.globalConfig.loginState === true"
            color="primary" [routerLink]="'../login'" mat-button>登录
    </button>
    <button *ngIf="configService.globalConfig && configService.globalConfig.registerState === true"
            color="accent" (click)="onSubmit()" mat-button>注册
    </button>
  </mat-card-actions>
</mat-card>
